*{
    margin:0;
    padding:0
}
html,body{
    height: 100%;
    width: 100%;
    background-color:#40e0d0;
    display:flex;
    justify-content: center;
    align-items: center;
}
.Devil{
    position: relative;
    width:110px;
    height: 100px;
    border-radius:20px;
    margin:10px;
    background-color:#e55a54;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
    animation:jumping 0.8s infinite alternate; 
}
.Devil .eye{
    height: 40%;
    width: 40%;
    border-radius:50%;
    background-color:#fff;
    margin:10px;
    display:flex;
    justify-content: center;
    align-items: center;   
    
}
.Devil .eye .eyeball{
    width: 50%;
    height:50%;
    border-radius:50%;
    background-color:#8B658B;
    animation:eyemove 1.6s infinite alternate;
}
.Devil .mouth{
    width:32%;
    height: 12px;
    border-radius: 12px;
    background-color:#fff;
    
     
}
.Devil::before,
.Devil::after{
    position:absolute;
    content: "";
    display: block;
    width:20%;
    height: 10px;
    border-radius:10px;
    background-color:#fff;
    top:-10px;
    left:50%;
}
.Devil::before{
    transform: translateX(-70%) rotate(45deg);
}
.Devil::after{
    transform: translateX(-30%) rotate(-45deg);
}
.Devil.another{
    animation-delay: 0.5s;
    background-color:#8B658B;
}
.Devil.another .eyeball,
.Devil.another .mouth{
    background-color:#e55a54;

}
@keyframes jumping{
    50%{
        top:0;
        box-shadow:0 10px 20px rgba(0,0,0,0.2);
    }
    100%{
        top:-50px;
        box-shadow:0 120px 20px rgba(0,0,0,0.2);
    }
}
@keyframes eyemove{
    0%,
    10%{
        transform:translate(50%);
    }
    90%,
    100%{
        transform:translate(-50%);
    }
}
.pageloading{
    position:fixed;
    height:100%;
    width:100%;
    background-color:#FFD700;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s

}
.pageloading .loading{
    width:200px;
    height: 5px;
    border-radius:8px;
    background-color:#ffffff;
    margin-top:50px;
    overflow: hidden;

}
.pageloading .loading .run{
    width:0%;
    height: 100%;
    background-color:#e55a54;

}
.pageloading.complete{
    opacity: 0;
}
.pageloading.complete .Devil{
    transition: 0.5s;
    transform: scale(0.1) rotateZ(360deg);
}
.bigText{
   color:#ffffff
}